<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
</style>
<body>
<!-- 容器 -->
<div id="root">
    <div class="container">
        <button @click="student.age++">年龄加1</button><br>
        <button @click="addsex()">添加性别属性默认为男</button><br>
        <button @click="updatesex()">修改性别属性</button><br>
        <input type="text" ref="nameInput" placeholder="请输入姓名">
        <input type="text" ref="ageInput" placeholder="请输入年龄">
        <button @click="addFriend()">添加朋友</button><br>
        <button @click="updateFirstFriendName()">修改第一个朋友姓名为'zc'</button><br>
        <button @click="addHobby()">添加爱好</button>
        <button @click="updateFirstHobby()">修改第一个爱好为'排球'</button>
        <p>姓名：{{ student.name }}</p>
        <p>年龄：{{ student.age }}</p>
        <p v-if="student.sex">性别：{{ student.sex}}</p>
        <p>爱好</p>
        <ul>
            <li v-for="(hobby, index) in student.hobby" :key="index">
                {{ hobby }}
            </li>
        </ul>
        <p>朋友</p>
        <ul>
            <li v-for="(friend, index) in student.friends" key="index">
                {{ friend.name }}--{{ friend.age }}
            </li>
        </ul>

    </div>
</div>
<script type="text/javascript">
    const vm=new Vue({
        el: '#root',
        data:{
            student: {
                name: '张三',
                age: 20,
                hobby: ['篮球', '足球', '乒乓球'],
                friends: [{name: '李四', age: '21'},{name: '王五',age:'20'}]
            }
        },
        methods:{
            addsex(){
                // Vue.set(this.student,'sex', '男')
                this.student.sex='男'
            },
            updatesex(){
                this.student.sex==='男'? Vue.set(this.student,'sex', '女') : Vue.set(this.student,'sex', '男')
            },
            addFriend(){
                this.student.friends.unshift({name: this.$refs.nameInput.value,age:this.$refs.ageInput.value})
            },
            updateFirstFriendName(){
                this.student.friends[0].name='zc'
            },
            addHobby(){
                this.student.hobby.push('羽毛球')
            },
            updateFirstHobby(){
                Vue.set(this.student.hobby, 0, '排球')
            }
        }
    })
</script>
</body>
</html>